<template>
	<view class="product-list">
		<view class="product-item" v-for="product in products" :key="product.productId" @click="goToDetail(product.productId)">
			<view class="price-tag" v-if="product.isOnSale">特价</view>
			<image :src="'/static/product/' + product.imgSrc" mode="aspectFill"></image>
			<view class="product-info">
				<text class="product-name">{{ product.name }}</text>
				<text class="product-price">{{ product.price }}</text>
			</view>
		</view>
		<view class="loading-text" v-if="products.length === 0">
			加载中...
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				products: []
			}
		},
		onLoad() {
			this.fetchProducts();
		},
		methods: {
			fetchProducts() {
				// 调用商品列表接口
				uni.request({
					url: 'http://localhost:8080/api/products',
					method: 'GET',
					success: (res) => {
						if (res.data.code === 200) {
							this.products = res.data.data;
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '获取商品列表失败',
							icon: 'none'
						});
					}
				});
			},
			goToDetail(productId) {
				// 跳转到商品详情页面
				uni.navigateTo({
					url: `/pages/product/detail?productId=${productId}`
				});
			}
		}
	}
</script>

<style>
	.product-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 15px;
		background-color: #f5f5f5;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.product-item {
		width: 46%;
		margin-bottom: 25px;
		background-color: #fff;
		border-radius: 15px;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		transition: all 0.3s ease;
		position: relative;
	}

	.product-item:hover {
		transform: translateY(-5px);
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
	}

	.product-item image {
		width: 100%;
		height: 160px;
		object-fit: cover;
		border-bottom: 1px solid #eee;
	}

	.product-info {
		padding: 15px;
	}

	.product-name {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 8px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		line-height: 1.4;
	}

	.product-price {
		color: #ff4d4f;
		font-size: 18px;
		font-weight: bold;
		position: relative;
		display: inline-block;
	}

	.product-price::before {
		content: "¥";
		font-size: 14px;
	}

	.price-tag {
		position: absolute;
		top: 10px;
		right: 10px;
		background: linear-gradient(135deg, #ff6b6b, #ff4d4f);
		color: white;
		font-size: 12px;
		font-weight: bold;
		padding: 4px 8px;
		border-radius: 10px;
		box-shadow: 0 2px 5px rgba(255, 77, 79, 0.3);
	}

	.loading-text {
		text-align: center;
		padding: 20px;
		color: #999;
		width: 100%;
	}
</style>